<template>
	<view class="tui-tabs">
		<!-- 固定头部 -->
		<view class="dfj-bg-base dfj-pd-lr-15 dfj-pd-t-30 dfj-overflow-hide" style="position: sticky;top:0;z-index: 99;">
			<view class="dfj-flex dfj-flex-ai-c">
				<navigator url="/pages/home/search" hover-class="" class="dfj-flex-1 dfj-flex dfj-flex-ai-c dfj-bg-white dfj-bd-radius-35">
					<view class="dfj-mg-l-20 dfj-mg-r-15"><text class="dfj-icon icon-search dfj-t-666"></text></view>
					<view class="dfj-flex-1 dfj-t-666 dfj-f-24 dfj-pd-tb-20">
						请输入您要购买的商品
					</view>
				</navigator>
				<view class="dfj-mg-l-20">
					<navigator url="/pages/my/message" style="font-size: 35rpx;">
						<text class="dfj-icon icon-xiaoxi dfj-t-white"></text>	
					</navigator>
				</view>
			</view>
			<!-- 头部 滚动导航 -->
			<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false"
			 :scroll-into-view="scrollInto">
				<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
					<view class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.menuName }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="tui-line-h"></view> -->
		
		
		<!-- 推荐 -->
		<template v-if="tabIndex == 0">
			<view class="home-main">
				<view class="home-main-top"></view>
				<view class="home-main-center">
					<view class="home-swiper">
						<swiper class="home-swiper-banner" :indicator-dots="true" :autoplay="true" :interval="5000" :circular="true">
							<swiper-item v-for="(item,index) in banners" :key="index">
								<image :src="item.imgUrl" style="width: 100%;height: 100%;border-radius: 15rpx;overflow: hidden;" mode="widthFix"/>
							</swiper-item>
						</swiper>
					</view>
					
					<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-f-24">
						<navigator url="/pages/home/search-content?pType=1" class="dfj-flex-1 dfj-pd-tb-25">
							<view><image style="width: 95rpx;height: auto;" mode="widthFix" src="/static/img/home/zq1.png"/></view>
							<view>限时专区</view>
						</navigator>
						<navigator url="/pages/home/search-content?pType=2" class="dfj-flex-1 dfj-pd-tb-25">
							<view><image style="width: 95rpx;height: auto;" mode="widthFix" src="/static/img/home/zq2.png"/></view>
							<view>优选特惠</view>
						</navigator>
						<navigator url="/pages/home/about" class="dfj-flex-1 dfj-pd-tb-25">
							<view><image style="width: 95rpx;height: auto;" mode="widthFix" src="/static/img/home/zq4.png"/></view>
							<view>关于我们</view>
						</navigator>
						<navigator url='/pages/my/help-center' class="dfj-flex-1 dfj-pd-tb-25">
							<view><image style="width: 95rpx;height: auto;" mode="widthFix" src="/static/img/home/zq3.png"/></view>
							<view>客服中心</view>
						</navigator>
						<navigator open-type="switchTab" url="/pages/classify/classify" class="dfj-flex-1 dfj-pd-tb-25">
							<view><image style="width: 95rpx;height: auto;" mode="widthFix" src="/static/img/home/zq5.png"/></view>
							<view>更多分类</view>
						</navigator>
					</view>
					
					<view class="dfj-mg-lr-15 dfj-bg-white dfj-flex dfj-flex-ai-c dfj-bd-radius-25">
						<view class="dfj-pd-20">
							<image src="/static/img/home/ic_dfj_hot.png" style="width: 140rpx;height: auto;" mode="widthFix"/>
						</view>
						<view class="dfj-flex-1">
							<swiper class="home-swiper-headline" :vertical="true" :autoplay="true" :interval="5000" :circular="true">
								<swiper-item v-for="(item,index) in notices" :key="index">
									<view class="headline-item">{{ item.content }}</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					
					<view class="dfj-mg-lr-15 dfj-bg-white dfj-bd-radius-25 dfj-mg-t-25">
						<view class="dfj-flex dfj-flex-ai-c dfj-pd-20">
							<view class="dfj-f-30">限时专区</view>
							<navigator class="dfj-flex-1 dfj-f-24 dfj-t-r" url="/pages/home/search-content?pType=1" hover-class="navigator-hover">
								查看更多 <text class="dfj-icon icon-gengduo1"></text>
							</navigator>
						</view>
						<view class="dfj-pd-lr-25">
							<swiper class="home-swiper-precinct" display-multiple-items="2" next-margin="100rpx">
								<swiper-item v-for="(item,index) in precinct" :key="index">
									<navigator :url="`/pages/home/details?pId=${item.pId}`" hover-class="navigator-hover" class="dfj-mg-r-20">
										<view class="dfj-bd-radius-10 dfj-overflow-hide dfj-ps-r" style="height: 270rpx;">
											<view class="cycleName-label">{{ item.cycleName }}</view>
											<image :src="item.iconUrl" style="width: 100%;height: 100%;vertical-align: top;"/>
										</view>
										<view class="dfj-f-26 dfj-t-hide">{{ item.productTitle }}</view>
										<view class="dfj-f-30 dfj-t-danger">￥{{ item.productPrice }}</view>
									</navigator>
								</swiper-item>
							</swiper>
						</view>
					</view>
					
					<view class="dfj-overflow-hide">
						<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-35 dfj-pd-lr-15">
							<view class="dfj-f-30">优选推荐</view>
							<navigator class="dfj-flex-1 dfj-f-24 dfj-t-r" url="/pages/home/search-content?pType=1" hover-class="navigator-hover">
								查看更多 <text class="dfj-icon icon-gengduo1"></text>
							</navigator>
						</view>
						<view class="dfj-flex dfj-flex-jc-sb dfj-flex-d-r dfj-flex-w-w dfj-pd-lr-15">
							<navigator :url="`/pages/home/details?pId=${item.pId}`" hover-class="navigator-hover" class="goods-item dfj-bd-radius-10 dfj-overflow-hide dfj-bg-white dfj-mg-b-15" v-for="(item,index) in goods" :key="index">
								<view class="dfj-ps-r" style="height: 360rpx;">
									<view class="cycleName-label">{{ item.cycleName }}</view>
									<image :src="item.iconUrl" style="width: 100%;height: 100%;vertical-align: top;"/>
								</view>
								<view class="dfj-t-ellipsis dfj-t-ellipsis-2 dfj-mg-lr-15" style="height: 75rpx;">{{ item.productTitle }}</view>
								<view class="dfj-flex dfj-flex-ai-c dfj-pd-15">
									<view class="dfj-flex-1 dfj-t-danger">￥{{ item.productPrice }}</view>
									<view class="dfj-t-999">{{ item.salesVolume }}人付款</view>
								</view>
							</navigator>
						</view>
					</view>
					
				</view>
				
			</view>
		</template>
		<!-- 其他 -->
		<template v-else>
			<view class="dfj-overflow-hide">
				<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-bg-white dfj-mg-b-20 dfj-t-666">
					<view class="dfj-flex-1 dfj-pd-tb-20" @click="HomeSort(0)" :class="sort == 0?'dfj-t-base':''">
						综合
					</view>
					<view class="dfj-flex-1 dfj-pd-tb-20" @click="HomeSort(1)" :class="sort == 1?'dfj-t-base':''">
						销量
					</view>
					<view class="dfj-flex-1 dfj-pd-tb-20">
						价格
						<view class="dfj-inline-block home-sort-op" @click="priceSort()">
							<view class="home-sort-t" :class="sort == 2?'dfj-t-base':''"><text class="dfj-icon icon-paixujiantoushang"></text></view>
							<view class="home-sort-e" :class="sort == 3?'dfj-t-base':''"><text class="dfj-icon icon-paixujiantouxia"></text></view>
						</view>
					</view>
				</view>
				
				<view class="dfj-flex dfj-flex-jc-sb dfj-flex-d-r dfj-flex-w-w dfj-pd-lr-15">
					<navigator :url="`/pages/home/details?pId=${item.pId}`" hover-class="navigator-hover" class="goods-item dfj-bd-radius-10 dfj-overflow-hide dfj-bg-white dfj-mg-b-15" v-for="(item,index) in other" :key="index">
						<view class="dfj-ps-r" style="height: 360rpx;">
							<image :src="item.iconUrl" style="width: 100%;height: 100%;vertical-align: top;"/>
							<view class="cycleName-label">{{ item.cycleName }}</view>
						</view>
						<view class="dfj-t-ellipsis dfj-t-ellipsis-2 dfj-mg-lr-15">{{ item.productTitle }}</view>
						<view class="dfj-flex dfj-flex-ai-c dfj-pd-15">
							<view class="dfj-flex-1 dfj-t-danger">￥{{ item.productPrice }}</view>
							<view class="dfj-t-999">{{ item.salesVolume }}人付款</view>
						</view>
					</navigator>
				</view>
			</view>
		</template>
		
		<!-- 内容 -->
		<!-- <swiper :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange">
			<swiper-item class="tui-swiper-item" v-for="(tab, index) in tabBars" :key="index">
				<scroll-view class="tui-scroll-v" refresher-background="#318cff" enable-back-to-top scroll-y @scrolltolower="loadMore(index)">
					
					
					
				</scroll-view>


			</swiper-item>
		</swiper> -->
		
		
		<view class="isWxBox" v-if="isWx">
			<view class="dfj-bg-white">
				<image src="/static/img/isWx1.png" style="width: 100%;height: auto;" mode="widthFix"></image>
				<view class="dfj-t-c dfj-f-35 dfj-mg-b-20">
					<view>点击屏幕右上角【...】</view>
					<view>用 浏览器 打开</view>
				</view>
				<image src="/static/img/isWx2.jpg" style="width: 100%;height: auto;" mode="widthFix"></image>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabBars: [],
				scrollInto: '',
				/* banner 幻灯片 */
				banners: [],
				/* 公告 */
				notices: [],
				/* 限时专区 */
				precinct: [],
				/* 优选推荐 */
				goods: [],
				/* 其它的 */
				other: [],
				
				homePage: 1,
				otherForbid: true,
				otherPage: 1,
				sort: 0,
				isWx: false
			};
		},
		onShow() {
			if(this.isWeiXinBrowser()){
				this.isWx = true
			}
		},
		onLoad() {
			this.getHome();
			this.getBanners();
			this.getPorductsByAreaType();
			this.loadMore(0)
		},
		methods: {
			getHome() {
				/* 顶部选项卡 */
				this.$http({
					url: '/sys/queryMenuNavigation',
					method: 'POST',
					data: {type: 1}
				}).then(res=> {
					this.tabBars = res.data
					localStorage.setItem('tabBars',JSON.stringify(res.data))
				})
			},
			getBanners() {
				/* banner and 公告 */
				this.$http({
					url: '/sys/index',
					method: 'post'
				}).then(res=> {
					this.banners = res.data.banners
					this.notices = res.data.notices
				})
			},
			getPorductsByAreaType(){
				/* 限时专区 */
				this.$http({
					url: '/sys/getPorductsByAreaType',
					method: 'GET',
					data: {sort: '1',page: '1',pType: '1',rows: '20'}
				}).then(res=> {
					this.precinct = res.data.list
				})
			},
			tabClick(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			tabChange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				//let scrollIndex = index - 1 < 0 ? 0 : index - 1;
				//this.scrollInto = String(this.tabBars[scrollIndex].id);
				console.log(this.tabIndex)
				this.otherPage = 1;
				this.other = [];
				this.loadMore(index)
			},
			loadMore(index) {
				if(index <= 0){
					//console.log("首页")
					this.$http({
						url: '/sys/getPorductsByAreaType',
						method: 'GET',
						data: {sort: '1',page: this.homePage,pType: '2',rows: '20'}
					}).then(res=> {
						console.log(res)
						this.homePage++;
						if(res.data.list.length > 0){
							this.goods.push(...res.data.list)
						}
					})
				}else{
					//console.log(this.tabBars[index].menuParam)
					//console.log("其它页")
					this.$http({
						url: '/sys/getPorductsByPType',
						method: 'GET',
						data: {
							sort: this.sort,page: this.otherPage,pType: this.tabBars[index].menuParam,rows: '20'
						}
					}).then(res=>{
						//console.log(res)
						this.otherPage++
						this.other.push(...res.data.list)
					})
				}
			},
			HomeSort(sort){
				this.sort = sort;
				this.otherPage = 1;
				this.other = [];
				this.loadMore(this.tabIndex)
			},
			priceSort(){
				if(this.sort != 2){
					this.sort = 2;
				}else{
					this.sort = 3;
				}
				this.otherPage = 1;
				this.other = [];
				this.loadMore(this.tabIndex)
			},
			
			isWeiXinBrowser() {
			
			// #ifdef H5
			
			// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
			
			let ua = window.navigator.userAgent.toLowerCase()
			
			// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
			
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			
			return true
			
			} else {
			
			return false
			
			}
			
			// #endif
			
			return false
			
			}
		},
		onReachBottom() {
			this.loadMore(this.tabIndex)
		}
	};
</script>

<style lang="scss" scoped>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.tui-tabs {
		/* flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #eee;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
		display: flex;
		-webkit-box-align: stretch;
		align-items: stretch;
		align-content: flex-start; */
	}

	.tui-scroll-h {
		margin: 15rpx 0;
		width: 690rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-line-h {
		/* #ifdef APP-PLUS */
		height: 1rpx;
		background-color: #cccccc;
		/* #endif */
		position: relative;
	}

	/* #ifndef APP-PLUS*/
	.tui-line-h::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #cccccc;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	/* #endif */

	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.tui-tab-item-image {
		vertical-align: top;
		height: 80rpx;
		line-height: 80rpx;
	}

	.tui-tab-item-title {
		vertical-align: top;
		color: #fff;
		font-size: 26rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-tab-item-title-active {
		font-size: 30rpx;
		font-weight: bold;
	}

	.tui-swiper-box {
		flex: 1 !important;

	}

	.tui-swiper-item {
		flex: 1 !important;
		flex-direction: row;
		display: flex;
		-webkit-box-align: stretch;
		align-items: stretch;
		align-content: flex-start;
	}

	.tui-scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.home-main {
		overflow: hidden;

		.home-main-top {
			background: #318cff;
			height: 60rpx;
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
		}

		.home-main-center {
			position: relative;
			top: -60rpx;
			margin-bottom: -60rpx;
			.home-swiper{
				margin: 0 30rpx;
				border-radius: 15rpx;
				overflow: hidden;
				.home-swiper-banner{height: 390rpx;}
			}
			
			.home-swiper-headline{
				height: 80rpx;
				.headline-item{
					line-height: 80rpx;
					font-size: 26rpx;
					color: #999;
				}
			}
			.home-swiper-precinct{
				height: 370rpx;
			}
			
		}
		
	}
	.goods-item{
		width: 49%;
	}
	.home-sort-op{
		position: relative;
		.home-sort-t{
			position: absolute;
			top: -30rpx;
		}
		.home-sort-e{
			position: absolute;
			bottom: -10rpx;
		}
	}
	
	.isWxBox{
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 1000;
		width: 100%;
		height: 100%;
		background: rgba(000,000,000,.5);
	}
</style>
